<template>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8" style="justify-content: end;">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="submitForm" v-hasPermi="['cemetery:feeDisclosure:add']"
              v-if="!hasData||editData">保存</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" @click="handleUpdate()"
              v-hasPermi="['cemetery:feeDisclosure:edit']" v-if="hasData">{{editData?'取消编辑':'编辑'}}</el-button>
          </el-col>
        </el-row>
      </template>

      <el-row v-if="!hasData||editData">
        <el-col :span="20">
          <el-form ref="feeDisclosureFormRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="收费公示名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入收费公示名称" />
            </el-form-item>
            <el-form-item label="内容类型" prop="contextType">
              <el-radio-group v-model="form.contextType">
                <el-radio :value="1">自有信息</el-radio>
                <el-radio :value="2">外链信息</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收费内容" prop="context" v-if="form.contextType==1">
              <editor v-model="form.context" :min-height="192" />
            </el-form-item>
            <el-form-item label="URL" prop="context" v-if="form.contextType==2">
              <el-input v-model="form.context" placeholder="请输入URL" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="20">
          <el-form ref="feeDisclosureFormRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="收费公示名称" prop="name">
              {{form.name}}
            </el-form-item>
            <el-form-item label="收费内容" prop="context" v-if="form.contextType==1">
              <div class="context" v-html="form.context"></div>
            </el-form-item>
            <el-form-item label="陵园内容" prop="context" v-if="form.contextType==2">
              <a :href="form.context" target="_blank">{{form.context}}</a>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup name="FeeDisclosure" lang="ts">
  import { listFeeDisclosure, getFeeDisclosure, delFeeDisclosure, addFeeDisclosure, updateFeeDisclosure } from '@/api/cemetery/feeDisclosure';
  import { FeeDisclosureVO, FeeDisclosureQuery, FeeDisclosureForm } from '@/api/cemetery/feeDisclosure/types';

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const feeDisclosureList = ref<FeeDisclosureVO[]>([]);
  const buttonLoading = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref<Array<string | number>>([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const hasData = ref(false);
  const editData = ref(false);
  const editId = ref('');

  const queryFormRef = ref<ElFormInstance>();
  const feeDisclosureFormRef = ref<ElFormInstance>();

  const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
  });

  const initFormData : FeeDisclosureForm = {
    id: undefined,
    name: undefined,
    context: undefined,
    contextType: 1,
  }
  const data = reactive<PageData<FeeDisclosureForm, FeeDisclosureQuery>>({
    form: { ...initFormData },
    queryParams: {
      pageNum: 1,
      pageSize: 1,
      name: undefined,
      context: undefined,
      contextType: undefined,
      params: {
      }
    },
    rules: {
      name: [
        { required: true, message: "收费公示名称不能为空", trigger: "blur" }
      ],
      contextType: [
        { required: true, message: "内容类型不能为空", trigger: "blur" }
      ],
      context: [
        { required: true, message: "收费内容不能为空", trigger: "blur" }
      ],
    }
  });

  const { queryParams, form, rules } = toRefs(data);

  /** 查询收费公示列表 */
  const getList = async () => {
    loading.value = true;
    const res = await listFeeDisclosure(queryParams.value);
    feeDisclosureList.value = res.rows;
    total.value = res.total;
    if (res.total > 0) {
      hasData.value = true
      form.value.name = res.rows[0].name
      form.value.contextType = res.rows[0].contextType
      form.value.context = res.rows[0].context
      editId.value = res.rows[0].id
    } else {
      hasData.value = false
    }
    loading.value = false;
  }

  /** 取消按钮 */
  const cancel = () => {
    reset();
    dialog.visible = false;
  }

  /** 表单重置 */
  const reset = () => {
    form.value = { ...initFormData };
    feeDisclosureFormRef.value?.resetFields();
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
  }

  /** 多选框选中数据 */
  const handleSelectionChange = (selection : FeeDisclosureVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }

  /** 新增按钮操作 */
  const handleAdd = () => {
    reset();
    dialog.visible = true;
    dialog.title = "添加收费公示";
  }

  /** 修改按钮操作 */
  const handleUpdate = async () => {
    if (editData.value) {
      editData.value = false
    } else {
      const _id = editId.value
      editData.value = true
      const res = await getFeeDisclosure(_id);
      Object.assign(form.value, res.data);
    }
    // dialog.visible = true;
    // dialog.title = "修改收费公示";
  }

  /** 提交按钮 */
  const submitForm = () => {
    feeDisclosureFormRef.value?.validate(async (valid : boolean) => {
      if (valid) {
        buttonLoading.value = true;
        if (editId.value) {
          await updateFeeDisclosure(form.value).finally(() => buttonLoading.value = false);
        } else {
          await addFeeDisclosure(form.value).finally(() => buttonLoading.value = false);
        }
        proxy?.$modal.msgSuccess("操作成功");
        editData.value = false
        dialog.visible = false;
        await getList();
      }
    });
  }

  /** 删除按钮操作 */
  const handleDelete = async (row ?: FeeDisclosureVO) => {
    const _ids = row?.id || ids.value;
    await proxy?.$modal.confirm('是否确认删除收费公示编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
    await delFeeDisclosure(_ids);
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
  }

  /** 导出按钮操作 */
  const handleExport = () => {
    proxy?.download('cemetery/feeDisclosure/export', {
      ...queryParams.value
    }, `feeDisclosure_${new Date().getTime()}.xlsx`)
  }

  onMounted(() => {
    getList();
  });
</script>
<style>
  .context img{
    max-width: 100%
  }
</style>
